<template>
	<view class="home">
		<!-- 中心内容 -->
		<view class="content">
			<view class="">
				<!-- 公司简介 -->
				<u-parse :html="aboutUs.content"></u-parse>
			</view>
			<!-- 漆面 -->
			<view class="paint clearfix">
				<view class="content-title">漆面</view>
				<scroll-view scroll-x class="bg-white nav text-center">
					<view class="flex text-center">
						<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in tabNav" :key="index"
						 @tap="tabSelect" :data-id="index">
							{{tabNav[index]}}
						</view>
					</view>
				</scroll-view>
				<block v-if="TabCur==0">
					<view class="pictures">
						<view class="picture-list" v-for="(item,index) in pictureList" :key="item.id">
							<!-- 图片 -->
							<view class="picture-list-info">
								<image class="picture-list-img" :src="item.url" data-src="item.url" @tap="previewImage(item.url)" />
								<!-- 图片下方的文字说明 -->
								<text class="picture-list-desc">{{item.title}}</text>
							</view>
						</view>
						<view class="loadmore text-center margin-lr-xl" @click="toLoadImages(1,26)">加载更多</view>
					</view>
				</block>
				<block v-if="TabCur==1">
					<view class="picture-list" v-for="(item,index) in videoList" :key="item.id">
						<!-- 图片 -->
						<view class="picture-list-info">
							<video class="picture-list-img" :src="item.url" controls></video>
							<!-- 图片下方的文字说明 -->
							<text class="picture-list-desc">{{item.title}}</text>
						</view>
					</view>
					<view class="loadmore text-center" @click="toLoadImages(2,26)">
						加载更多
					</view>
				</block>
			</view>

			<!-- 改色 -->
			<view class="color-change clearfix">
				<view class="content-title">改色</view>
				<scroll-view scroll-x class="bg-white nav text-center">
					<view class="flex text-center">
						<view class="cu-item flex-sub" :class="i==TabCur1?'text-orange cur':''" v-for="(item,i) in tabNav" :key="i" @tap="tabSelect1"
						 :data-id="i">
							{{tabNav[i]}}
						</view>
					</view>
				</scroll-view>
				<block v-if="TabCur1==0">
					<view class="picture-list" v-for="(item,i) in color_pictureList" :key="item.id">
						<!-- 图片 -->
						<view class="picture-list-info">
							<image class="picture-list-img" :src="item.url" data-src="item.url" @tap="previewImage(item.url)" />
							<!-- 图片下方的文字说明 -->
							<text class="picture-list-desc">{{item.title}}</text>
						</view>
					</view>
					<view class="loadmore text-center" @click="toLoadImages(1,27)">加载更多</view>
				</block>
				<block v-if="TabCur1==1">
					<view class="picture-list" v-for="(item,i) in color_videoList" :key="item.id">
						<!-- 图片 -->
						<view class="picture-list-info">
							<video class="picture-list-img" :src="item.url" controls></video>
							<!-- 图片下方的文字说明 -->
							<text class="picture-list-desc">{{item.title}}</text>
						</view>
					</view>
					<view class="loadmore text-center" @click="toLoadImages(2,27)">加载更多</view>
				</block>
			</view>
			
			<!-- 窗膜 -->
			<view class="color-change clearfix">
				<view class="content-title">窗膜</view>
				<scroll-view scroll-x class="bg-white nav text-center">
					<view class="flex text-center">
						<view class="cu-item flex-sub" :class="i==TabCur2?'text-orange cur':''" v-for="(item,i) in tabNav" :key="i" @tap="tabSelect2"
						 :data-id="i">
							{{tabNav[i]}}
						</view>
					</view>
				</scroll-view>
				<block v-if="TabCur2==0">
					<view class="picture-list" v-for="(item,i) in color_pictureList" :key="item.id">
						<!-- 图片 -->
						<view class="picture-list-info">
							<image class="picture-list-img" :src="item.url" data-src="item.url" @tap="previewImage(item.url)" />
							<!-- 图片下方的文字说明 -->
							<text class="picture-list-desc">{{item.title}}</text>
						</view>
					</view>
					<view class="loadmore text-center" @click="toLoadImages(1,27)">加载更多</view>
				</block>
				<block v-if="TabCur2==1">
					<view class="picture-list" v-for="(item,i) in color_videoList" :key="item.id">
						<!-- 图片 -->
						<view class="picture-list-info">
							<video class="picture-list-img" :src="item.url" controls></video>
							<!-- 图片下方的文字说明 -->
							<text class="picture-list-desc">{{item.title}}</text>
						</view>
					</view>
					<view class="loadmore text-center" @click="toLoadImages(2,27)">加载更多</view>
				</block>
			</view>
			
			<!-- 防爆 -->
			<view class="color-change clearfix">
				<view class="content-title">防爆膜</view>
				<scroll-view scroll-x class="bg-white nav text-center">
					<view class="flex text-center">
						<view class="cu-item flex-sub" :class="i==TabCur3?'text-orange cur':''" v-for="(item,i) in tabNav" :key="i" @tap="tabSelect3"
						 :data-id="i">
							{{tabNav[i]}}
						</view>
					</view>
				</scroll-view>
				<block v-if="TabCur3==0">
					<view class="picture-list" v-for="(item,i) in color_pictureList" :key="item.id">
						<!-- 图片 -->
						<view class="picture-list-info">
							<image class="picture-list-img" :src="item.url" data-src="item.url" @tap="previewImage(item.url)" />
							<!-- 图片下方的文字说明 -->
							<text class="picture-list-desc">{{item.title}}</text>
						</view>
					</view>
					<view class="loadmore text-center" @click="toLoadImages(1,27)">加载更多</view>
				</block>
				<block v-if="TabCur3==1">
					<view class="picture-list" v-for="(item,i) in color_videoList" :key="item.id">
						<!-- 图片 -->
						<view class="picture-list-info">
							<video class="picture-list-img" :src="item.url" controls></video>
							<!-- 图片下方的文字说明 -->
							<text class="picture-list-desc">{{item.title}}</text>
						</view>
					</view>
					<view class="loadmore text-center" @click="toLoadImages(2,27)">加载更多</view>
				</block>
			</view>
		</view>
		<!-- 底部导航 -->
		<u-tabbar class="tab_bar" v-model="nav_current" :list="nav_list" active-color='#2C2C2C' height="100"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pagetitle: '',
				nav_list: [{
						pagePath: "/pages/index/index",
						iconPath: "/static/death/nav/home.png",
						selectedIconPath: "/static/death/home-selected.png",
						text: '首页'
					},
					{
						pagePath: "/pages/car/case",
						iconPath: "/static/death/nav/case.png",
						selectedIconPath: "/static/death/nav/case-selected.png",
						text: '案例'
					},
					{
						pagePath: "/pages/car/quote",
						iconPath: "/static/death/nav/price.png",
						selectedIconPath: "/static/death/nav/price-selected.png",
						text: '报价'
					},
					{
						pagePath: "/pages/product/product",
						iconPath: "/static/death/nav/brand.png",
						selectedIconPath: "/static/death/nav/brand-selected.png",
						text: '品牌'
					},
					{
						pagePath: "/pages/my/my",
						iconPath: "/static/death/nav/mine.png",
						selectedIconPath: "/static/death/nav/mine-selected.png",
						text: '我的'
					},
				], // 底部导航
				nav_current: 3,
				banner: [], //轮播图
				paintList: [{
					name: '图片案例'
				}, {
					name: '视频案例'
				}],
				show_img: true,
				current: 0,
				pictureList: [],
				color_pictureList: [],
				color_videoList: [],
				videoList: [],
				articleList: [],
				TabCur:  0,
				TabCur1: 0,
				TabCur2: 0,
				TabCur3: 0,
				tabNav: ['图片案例', '视频案例'],
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				images: [],
				brandVideo: '',
				aboutUs:'',
			}
		},
		computed:{
		},
		onLoad() {
			this.show_paintlist = this.pictureList;
			this.getIndexData();
			this.getPageAbout();
		},		
		methods: {
			async getPageAbout(){
				let res = await this.$api.getPage({id: 4});
				if(!res.code){
					return;
				}
				this.aboutUs = res.data;
			},
			async getIndexData(){
				//获取首页数据
				let res = await this.$api.getIndex();
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				this.banner = res.data.bannerList;
				this.brandVideo = res.data.brandVideo[0].url;
				this.videoList = res.data.samplesVideo;
				this.pictureList = res.data.samplesImage;
				this.color_pictureList = res.data.colorImage;
				this.color_videoList = res.data.colorVideo;
				this.articleList = res.data.articles;
			},
			//
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			tabSelect1(e) {
				this.TabCur1 = e.currentTarget.dataset.id;
			},
			tabSelect2(e) {
				this.TabCur2 = e.currentTarget.dataset.id;
			},
			tabSelect3(e) {
				this.TabCur3 = e.currentTarget.dataset.id;
			},

			//跳转到登录页
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			//认证技师
			toCheck() {
				uni.navigateTo({
					url: '/pages/check/check'
				})
			},
			//质保录入
			toWrite() {
				if(!this.isLogin){
					this.toLogin();
				}
				else{
					uni.navigateTo({
						url: '/pages/write/write'
					})
				}
			},
			//质保查询
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			//网点查询
			toInternet() {
				uni.navigateTo({
					url: '/pages/search/internet'
				})
			},
			//文章详情
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/article/detail?id='+id
				})
			},
			//加载图片案例
			toLoadImages(type, channel) {
				uni.navigateTo({
					url: '/pages/loadmore/loadImages?type='+type+'&channel='+channel
				})
			},
			//图片预览
			previewImage(url) {
				var images = [];
				images.push(url);
				uni.previewImage({
					current: 0,
					urls: images
				});
				console.log(images)
			},


		},

	}
</script>

<style lang="scss" scoped>
	.search {
		width: 90%;
		margin: 0 auto;
		// padding: 20upx 0;

		::v-deep .uni-input-input {
			width: 600upx;
		}
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 30upx;
		background: #fff;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.img {
			padding: 20upx;
			background-color: orange;
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
		}
	}

	.content {

		.content-title {
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			font-size: 32upx;
			// border: 2upx solid red;
		}

		.brand {
			// border: 2upx solid red;
			text-align: center;

			.video {
				width: 100%;
			}
		}


		.loadmore {
			clear: both;
			padding: 80upx;
		}

		//漆面
		.paint {
			// border: 2upx solid red;
			display: none;
		}

		//改色
		.color-change {
			display: none;

			.color-example {
				.color-tabs {}
			}
		}

		//文章列表
		.article {

			.article-list {
				margin-left: -15upx;
				margin-right: 20upx;
				padding: 25upx;

				.article-title {
					// line-height: 100upx;
					font-size: 30upx;
					margin-left: 50upx;
				}
				
				.article-pic {
					width: 100%;
					height: 100%;
				}
			}

		}
	}

	.picture-list-info {
		float: left;
		margin-left: 50upx;
		margin-top: 50upx;
		position: relative;
	}

	.picture-list-img {
		width: 300upx;
		height: 250upx;
	}

	.picture-list-desc {
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 25upx;
		padding: 10upx;

	}
</style>
